<template>
	<div class="wrap">
		<div class="wrapper" ref='guess'>
			 <ul>
				 <li v-for="(item,index) of galaryList" :key="index">
					 <span class="line" @click='handleClick(item,index)' :class="[Num == index?'active':'']">{{item.title}}</span>
				 </li>
			 </ul>
		</div>
		
		<div class="tishi" v-show='false'>
			<span>全部</span>
			<span>其他</span>
		</div>
		<component :is='type'></component>
	</div>
</template>
<script>
import galaryContent from './galaryContent'
 export default {
	 name: 'detailGalary',
	  data () {
		return {
			type:'galaryContent',
			galaryList:[
				{
					title:'西塘古镇',
				},
				{
					title:'西塘古镇1',
				},
				{
					title:'西塘古镇2',
				}
			],
			Num:0,
			active:'',
			headerScroll:'',
		}
	  },
	  mounted(){
		  this.active='active'
	  },
	  components:{
		  galaryContent
	  },
	  methods:{
		  handleClick(item,index){
			  this.$store.state.index=index
			  this.Num = index
		  },
	  }
}
</script>
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrap
	position:absolute
	top:.83rem
	left:0
	right:0
	bottom:0
	color:#fff
	z-index:100
	background:#fff
	.wrapper
		width:100%
		border-bottom:1px solid #ccc
		height:1rem
		ul
			width:90%
			margin:0 auto
			display:flex
			li
				-webkit-box-flex: 1;
				-ms-flex: 1;
				flex: 1;
				text-align: center;
				.line
					line-height:1rem
					text-align:center
					font-size:0.35rem
					position: relative
					color:#000
				.active
					color:#23beae
				.active:after
					display: block;
					content: "";
					width: 100%;
					height: 3px;
					background: #23beae;
					position: absolute;
					bottom: -0.3rem;
					left: 0;
					border-radius: 2px;
	.headerScroll
		position:fixed
		top:0.8rem
		left:0
		z-index:100
		background:#fff
		width:100%
	.tishi
		width:100%
		background:#ddd
		height:0.6rem
		span
			line-height:0.6rem
			margin-left:0.2rem
			font-size:0.3rem
			color:#000

</style>
